<!-- 菜谱 -->
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span class="demonstration mr-[30px]">选择月份:</span>
        <el-date-picker
          v-model="month"
          type="month"
          placeholder="请选择月份"
          @change="onMonthChange"
          value-format="YYYY-MM"
        />
      </div>
    </template>

    <!-- 标题 -->
    <h3 class="month-title">{{ title }}</h3>

    <!-- 菜谱列表 -->
    <el-table :data="tableData" style="width: 100%" row-key="week">
      <el-table-column prop="week" label="周次" width="100" align="center" />
      <el-table-column v-for="day in weekdays" :key="day.key" :label="day.label" align="center">
        <template #default="{ row }">
          <div v-if="row.meals[day.key]" class="menu-item">
            <p><strong>早餐:</strong> {{ row.meals[day.key].breakfast.join(", ") }}</p>
            <p><strong>加餐:</strong> {{ row.meals[day.key].snack.join(", ") }}</p>
            <p><strong>午餐:</strong> {{ formatLunch(row.meals[day.key].lunch) }}</p>
            <p><strong>晚餐:</strong> {{ formatDinner(row.meals[day.key].dinner) }}</p>
          </div>
          <div v-else class="no-data">无数据</div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { useDishStore } from "@/stores/dish";
const dishStore = useDishStore();

// 格式化时间为YYYY-MM
const month = ref<string | null>(new Date().toISOString().slice(0, 7));

const weekdays = [
  { key: "monday", label: "星期一" },
  { key: "tuesday", label: "星期二" },
  { key: "wednesday", label: "星期三" },
  { key: "thursday", label: "星期四" },
  { key: "friday", label: "星期五" },
];

// 标题
const title = computed(() => {
  if (!month.value) {
    return "菜谱";
  }

  const parts = month.value.split("-");
  const year = parts[0]; // 年份
  const monthNumber = parts[1]; // 月份

  return year + "年" + parseInt(monthNumber) + "月菜谱";
});

// 获取当前月的周菜单列表
const tableData = computed(() => {
  return dishStore.monthDishList;
});

// 当月份选择变化
const onMonthChange = (val: string | null) => {
  if (!val) return;
  const date = new Date(val);
  const selectedMonth = date.getMonth() + 1;
  dishStore.setMonth(selectedMonth);
};

// 格式化午餐
const formatLunch = (lunch: any) => {
  return `${lunch.staple}; ${lunch.main.join("+")}; ${lunch.vegetable.join("+")}; ${lunch.soup}`;
};

// 格式化晚餐
const formatDinner = (dinner: any) => {
  return `${dinner.staple}; ${dinner.dish.join("+")}; ${dinner.soup}`;
};

// 初始化加载
onMonthChange(month.value);
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
  }

  .month-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
  }

  .el-table {
    font-size: 14px;
  }

  .menu-item {
    p {
      margin: 6px 0;
      padding: 4px 8px;
      border-radius: 4px;
      white-space: pre-wrap;

      // 早餐 - 蓝色
      &:nth-child(1) {
        background-color: #e3f2fd;
        color: #1565c0;
        font-weight: 500;
      }

      // 加餐 - 橙色
      &:nth-child(2) {
        background-color: #fff3e0;
        color: #ef6c00;
        font-weight: 500;
      }

      // 午餐 - 绿色
      &:nth-child(3) {
        background-color: #e8f5e8;
        color: #2e7d32;
        font-weight: 500;
      }

      // 晚餐 - 红色
      &:nth-child(4) {
        background-color: #ffebee;
        color: #c62828;
        font-weight: 500;
      }
    }
  }

  .no-data {
    font-size: 12px;
    color: #999;
    font-style: italic;
  }
}
</style>
